<template>
  <div class="box">
    <div class="ceshi">
      <div v-for="(item,index) in ceshi" :key="index" :class="acindex==index?'active':''" @click="acindex=index">
        {{item}}
      </div>
    </div>
    <div v-if="acindex==0" class="search-box">
      <div class="search" id="search-box">
        <el-form :model="numberValidateForm" ref="numberValidateForm" :inline="true" class="demo-form-inline">
          <el-form-item label="账户" prop="age">
            <el-select size="mini" v-model="numberValidateForm.age" placeholder="请选择角色" clearable>
              <el-option value="1">
                帅气1
              </el-option>
              <el-option value="2">
                帅气2
              </el-option>
              <el-option value="3">
                帅气3
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名" prop="region">
            <el-input v-model="numberValidateForm.region" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="管理员" prop="user">
            <el-radio-group v-model="numberValidateForm.user" @change="gb">
              <el-radio :label="3">备选项</el-radio>
              <el-radio :label="6">备选项</el-radio>
              <el-radio :label="9">备选项</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select size="mini" v-model="numberValidateForm.sex" placeholder="请选择性别" clearable>
              <el-option value="1">
                男
              </el-option>
              <el-option value="2">
                女
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话" prop="number">
            <el-input type="number" v-model="numberValidateForm.number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="日期" prop="date">
            <el-date-picker :editable="false" type="date" placeholder="选择日期" v-model="numberValidateForm.date" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="时间" prop="time">
            <el-time-picker :editable="false" placeholder="选择时间" v-model="numberValidateForm.time" style="width: 100%;"></el-time-picker>
          </el-form-item>
          <el-form-item <el-button type="danger" plain @click="submitForm('numberValidateForm')">查询</el-button>
            <el-button plain @click="resetForm('numberValidateForm')">重置</el-button>
          </el-form-item>

        </el-form>
        </el-form-item>
        </el-form>
      </div>
      <div class="search">
        <el-button type="danger" style="margin-bottom:20px">添加</el-button>
        <el-scrollbar style="width:100%;">
          <el-row :style="{width:rowwidth}">
            <el-table ref="table" :data="tableData1.slice((currentPage - 1) * pageSize, currentPage * pageSize)" class="table-box" size="mini">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column label="编号" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column label="账号" width="180">
                <template slot-scope="scope">
                  {{ scope.row.loginId }}
                </template>
              </el-table-column>
              <el-table-column label="姓名" width="180">
                <template slot-scope="scope">
                  {{ scope.row.name }}
                </template>
              </el-table-column>
              <el-table-column label="头像" width="180">
                <template slot-scope="scope">
                  <el-image style="width: 45px; height: 45px;border-radius: 50%;" src="https://img2.baidu.com/it/u=1994380678,3283034272&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1657904400&t=7d56cee3940c0413611f237d9d4a64a8" fit="cover"></el-image>
                </template>
              </el-table-column>
              <el-table-column label="电话" width="180">
                <template slot-scope="scope">
                  {{ scope.row.phone }}
                </template>
              </el-table-column>
              <el-table-column label="日期" width="180">
                <template slot-scope="scope">
                  {{ scope.row.date}}
                </template>
              </el-table-column>
              <el-table-column label="性别" width="180">
                <template slot-scope="scope">
                  {{ scope.row.sex }}
                </template>
              </el-table-column>
              <el-table-column label="时间" width="180">
                <template slot-scope="scope">
                  {{ scope.row.time }}
                </template>
              </el-table-column>

              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-scrollbar>

        <!-- 分页 -->
        <div class="flex j-c" style="margin-top:5px">
          <el-pagination class="pagination" align="center" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1, 5, 10, 20]" :page-size="pageSize" layout="total, prev, pager, next" :total=" tableData1.length">
          </el-pagination>
        </div>
      </div>
    </div>
    <div v-else class="search-box">
      <div class="search">
        搜索区域  
      </div>
      <div class="search">
        <el-scrollbar style="width:100%;">
          <el-button type="danger" style="margin-bottom:20px">添加</el-button>
          <el-row :style="{width:rowwidth1}">
            <el-table ref="ttTbale" :data="tableData1.slice((currentPage - 1) * pageSize, currentPage * pageSize)" class="table-box" size="mini">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column label="id" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column label="海报名称" width="180">
                <template slot-scope="scope">
                  {{ scope.row.loginId }}
                </template>
              </el-table-column>
              <el-table-column label="海报类型" width="180">
                <template slot-scope="scope">
                  {{ scope.row.name }}
                </template>
              </el-table-column>
              <el-table-column label="图片" width="180">
                <template slot-scope="scope">
                  <el-image style="width: 45px; height: 45px;" src="https://img2.baidu.com/it/u=1994380678,3283034272&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1657904400&t=7d56cee3940c0413611f237d9d4a64a8" fit="cover"></el-image>
                </template>
              </el-table-column>
              <el-table-column label="跳转地址" width="180">
                <template slot-scope="scope">
                  {{ scope.row.phone }}
                </template>
              </el-table-column>
              <el-table-column label="跳转id" width="180">
                <template slot-scope="scope">
                  {{ scope.row.date}}
                </template>
              </el-table-column>
              <el-table-column label="上架时间" width="180">
                <template slot-scope="scope">
                  {{ scope.row.date}}
                </template>
              </el-table-column>
              <el-table-column label="下架时间" width="180">
                <template slot-scope="scope">
                  {{ scope.row.date}}
                </template>
              </el-table-column>
              <el-table-column label="版本范围-后向兼容" width="180">
                <template slot-scope="scope">
                  {{ scope.row.date}}
                </template>
              </el-table-column>
              <el-table-column label="版本范围-后向兼容" width="180">
                <template slot-scope="scope">
                  {{ scope.row.date}}
                </template>
              </el-table-column>
              <el-table-column label="性别" width="180">
                <template slot-scope="scope">
                  {{ scope.row.sex }}
                </template>
              </el-table-column>

              <el-table-column label="时间" width="180">
                <template slot-scope="scope">
                  {{ scope.row.time }}
                </template>
              </el-table-column>

              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script>
import { formatDate } from '../../../plugin/timePlug'
export default {
  name: 'App',
  data() {
    return {
      ceshi: ['团员管理', '退员查询'],

      acindex: 0,
      // 表格数据
      tableData: new Array(26).fill().map((v, i) => {
        return {
          id: Math.floor(Math.random() * 22),
          loginId: 'admin' + i,
          name: '测试' + i,
          phone: '1595170901' + Math.floor(Math.random() * 9),
          role: {
            roleId: Math.floor(Math.random() * 22),
            roleName: '管理员' + i
          },
          date: this.randomDate(),
          sex: i % 2 == 0 ? '男' : '女',
          time: formatDate(new Date, 'yyyy-MM-dd HH:mm:ss')
        }
      }),
      currentPage: 1, // 当前页码
      pageSize: 10,// 每页的数据条数
      //展示数组
      tableData1: [],
      // // 角色编号（用于根据条件查询账号信息）
      roleId: '',
      rowwidth: '',
      rowwidth1: '',
      numberValidateForm: {
        user: '',
        region: '',
        age: '',
        sex: '',
        number: '',
        date: '',
        time: ''
      }

    }
  },
  mounted() {
    var name=['张三','李四','王五','赵六','刘七']
    var age=[20,30,40,50,60]
    var phone=[123456789,15784795,648848,48848,4848]
    var sum=new Array(5).fill().map((v,i)=>{
       return {name:name[i],age:age[i],phone:phone[i]}
    })
    console.log(sum);
    this.rowwidth = this.$refs.table.bodyWidth
    // this.rowwidth1=this.$refs.table1.bodyWidth
    // console.log(this.$refs.ttTbale);
    var arr = new Array(10).fill()
    this.tableData1 = this.tableData
    // console.log(this.randomDate());
    for (var i = 0; i < 5; i++) {
      this.ball();
    }
    
  },
  methods: {
    //补: 其实数组也有indexOf，用法和str.indexOf完全一样！
    ball() {
      //定义空数组reds
      var reds = [];
      //反复: 只要reds中的球数<6
      while (reds.length < 6) {
        //在1~33之间生成一个随机整数r;
        var r = parseInt(Math.random() * 33 + 1);
        //如果reds中不包含r
        if (reds.indexOf(r) == -1)
          //才将r压入reds数组中
          reds.push(r);
      }//(循环结束)
      //将reds数组按数字升序排列
      reds.sort(function (a, b) { return a - b; });
      //在1~16之间生成一个随机整数blue
      var blue = parseInt(Math.random() * 16 + 1);
      // console.log(reds);
      
    },

    randomDate() {
      // 随机生成0-11的数字
      const randomMonthNum = Math.floor(Math.random() * (11 - 1) + 1);
      // 随机生成1-30数字
      const randomDateNum = Math.ceil(Math.random() * 30);
      return '2022-' + (randomMonthNum >= 10 ? randomMonthNum : '0' + randomMonthNum) + "-" + (randomDateNum >= 10 ? randomDateNum : "0" + randomDateNum);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      // console.log(formName);
      this.$refs[formName].resetFields();
    },
    gb(value) {
      var list = [{ id: 3, name: '傻逼1号' }, { id: 6, name: '傻逼2号' }, { id: 9, name: '傻逼3号' }, { id: 12, name: '傻逼4号' }, { id: 15, name: '傻逼6号' }, { id: 18, name: '傻逼5号' }]
      list.forEach((v, i) => {
        if (value == v.id) {
          alert(v.name)
        }
      })
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    searchClick() {
      if (!this.roleId) return this.tableData1 = this.tableData
      this.tableData1 = this.tableData.filter(r => r.role.roleId == this.roleId)
    },
  }
}
</script>
<style scoped lang='scss'>
.common {
  color: #666;
  margin-right: 45px;
  margin-bottom: 10px;
}

::v-deep .el-input__inner {
  width: 200px;
  height: 28px;
  line-height: 28px;
}

.ceshi {
  display: flex;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 15px 25px;
  background-color: #e8e8e8;
  div:last-child {
    margin-left: 20px;
  }
}
.active {
  color: #f43e3b;
  border-bottom: 4px solid #f43e3b;
  font-weight: bold;
  font-size: 15px;
}
.search-box {
  margin-top: 40px;
  .search {
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px 25px;
    background-color: #e8e8e8;
  }
}
</style>